import Vue from 'vue'

import VueRouter from 'vue-router'
Vue.use(VueRouter)

//导入格式化时间的插件
import moment from 'moment'
//定义全局的过滤器
Vue.filter('dateFormat', function(dataStr, pattern = "YYYY-MM-DD HH:mm:ss") {
	return moment(dataStr).format(pattern)
})
import filter from './filter/index.js'
// 导入全局过滤器文件
Object.keys(filter).forEach(key => {  
	Vue.filter(key, filter[key])  
  }) 

// 导入vue-rescource 用来获取数据
import VueResource from 'vue-resource'
// 安装vue-resource
Vue.use(VueResource)

// Vue.http.options.root = 'http://vue.studyit.io';
Vue.http.options.emulateJSON = true;

import app from './app.vue'

/* import { Header, Swipe, SwipeItem ,Button,Lazyload} from 'mint-ui';

Vue.use(Lazyload);
import 'mint-ui/lib/style.css' */

import './lib/mui/css/mui.css'
import './lib/mui/css/icons-extra.css'

/* Vue.component(Header.name, Header);
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
Vue.component(Button.name, Button);
 */
import MintUI from 'mint-ui' //把所有的组件都导入进来
//这里省略node_modules这一层目录
import 'mint-ui/lib/style.css'
// 将mintui安装到vue中
Vue.use(MintUI) //把所有的组件，注册为全局的组件

// 安装图片预览插件
import VuePreview from 'vue-preview'
Vue.use(VuePreview)

// vant ui引入使用

import {
	Sidebar,
	SidebarItem,
	Form,
	Field,
	Button,
	Card,
	Tag,
	Grid,
	GridItem,
	Overlay
} from 'vant';

Vue.use(Overlay);
Vue.use(Grid);
Vue.use(GridItem)
Vue.use(Tag);
Vue.use(Card);
Vue.use(Sidebar);
Vue.use(SidebarItem);
Vue.use(Form);
Vue.use(Field);
Vue.use(Button);
import 'vant/lib/index.css';

import router from './router.js'
// 一个 Vuex 应用的核心是 store（仓库，一个容器），store包含着你的应用中大部分的状态 (state)。
// 配置vuex的步骤
// 1.装包 运行cnpm i vuex -S
// 2.导入包
import Vuex from 'vuex'
// 3.注册vuex到vue中
Vue.use(Vuex)

//  每次刚进入网站，肯定会调用main.js 在刚调用的时候，先从本地存储中，把购物车的数据读出来
// ，放到store中
var car = JSON.parse(localStorage.getItem('car') || '[]')
var userId = JSON.parse(sessionStorage.getItem('member') || '{}' )
function man() {
	if( sessionStorage.getItem('member') ){
		return true
	} else {
		return false
	}
}
// 4. new Vuex.Store() 实例得到一个数据仓储对象
var store = new Vuex.Store({
	state: { // this.$store.state.***
		// 大家可以把 state想象成组件中的 data 专门用来存储数据
		// 如果要在组件中，想要访问，store中的数据，只能通过this.$store.state.*** 来访问
		car: car ,//将购物车中的商品的数据，用一个数组存储起来，在car数组中，存储一些商品的对象
		userId: userId._id,
		userLogin: man()
		// ，咋们可以暂时将这个商品对象，设计成这个样子 { id: 商品id,count:商品数量,price: 商品价格,selected:false }
	},
	mutations: { // this.$store.commit('方法名称','按需传递唯一的参数')
		// 可以把 mutations 想象成组件中的methods 专门用来存储方法
		// 注意：如果要操作 store 中的state 值，只能通过调用mutations提供的方法，才能操作
		// 对应的数据，不推荐直接操作 state 中的数据，因为 万一导致了数据的紊乱，不能快速定位到错误的原因
		// 因为，每个组件都可能有操作数据的方法
		addToCar(state, goodsinfo) {
			// 点击加如购物车，把商品信息保存到store 中的car上
			// 分析
			// 1.如果购物城中，之前就已经有了这个对应的商品了，那么，只需要更新数量
			// 2. 如果没有，则直接把 商品数据，push到car中

			// 假设在购物车中，没有找到对应的商品
			var flag = false

			state.car.some(item => {
				if (item.id == goodsinfo.id) {
					item.count += parseInt(goodsinfo.count)
					/* flag = true
					return true */
					return flag = true
				}
			})
			if (!flag) {
				state.car.push(goodsinfo)
			}
			// 当 更新 car 之后，把car 数组，存储到本地的 localstorage 中
			localStorage.setItem('car', JSON.stringify(state.car))
		},
		updateGoodsInfo(state, goodsinfo) {
			//修改购物车中商品的数量值
			state.car.some(item => {
				if (item.id == goodsinfo.id) {
					item.count = parseInt(goodsinfo.count)
					return true
				}
			})
			localStorage.setItem('car', JSON.stringify(state.car))
		},
		removeFromCar(state, id) {
			state.car.some((item, i) => {
				if (item.id == id) {
					state.car.splice(i, 1)
					return true
				}
			})
			localStorage.setItem('car', JSON.stringify(state.car))
		},
		removeSelected(state, item) {
			console.log(item)
			let obj = {} 
			let car = []
			item.forEach(function(item,index){
			  obj[item] = true 
			})
			console.log(obj) 
			state.car.forEach(function(item,index){
			  if(!obj[item.id]){ 
			    car.push(item) 
			  }
			})
			console.log(car)
			localStorage.setItem('car',JSON.stringify(car))
		},
		updateGoodsSelected(state, info) {
			state.car.some(item => {
				if (item.id == info.id) {
					item.selected = info.selected
				}
			})
			localStorage.setItem('car', JSON.stringify(state.car))
		},
		//退出登录时修改状态
		updateUserLogin(state){
			// 分析： 只需要修改vuex中member的参数状态，不需要额外操作
			state.userLogin = false
		},
		//登陆时修改状态
		loginUser(state){
			state.userLogin = true
		},
		updateUserId(state) {
			state.userId = JSON.parse(sessionStorage.getItem('member'))._id
		}
	},
	// 注意：如果组件想要盗用mutations中的方法 ，只能使用 this.$store.commit('方法名')
	//  这种调用 mutations 方法的格式 和this.$emit('父组件中方法名' )
	getters: { //this.$store.getters.***
		//注意：这里的getters，只负责对外提供数据，不负责修改数据，如果想要修改state中的数据
		// 请去找mutations
		getAllCount(state) {
			var c = 0;
			state.car.forEach(item => {
				c += item.count
			})
			return c
		},
		getGoodsCount(state) {
			var o = {}
			state.car.forEach(item => {
				o[item.id] = item.count
			})
			return o;
		},
		getGoodsSelected(state) {
			var o = {}
			state.car.forEach(item => {
				o[item.id] = item.selected
			})
			return o
		},
		getGoodsCountAndAmount(state) {
			var o = {
				count: 0, // 勾选的数量
				amount: 0 //勾选的总价
			}
			state.car.forEach(item => {
				if (item.selected === true) {
					o.count += item.count
					o.amount += item.price * item.count
				}
			})
			return o
		}
	}
	// 经过回顾对比，发现getters中的方法，和组件中的过滤器比较类似，因为，过滤器
	// 和getters 都没有修改元数据，都是把元数据做了一层包装，提供给了调用者
	// 其次，getters 也和 computed 比较像，只要 state 中的数据发生变化了，那么，如果
	// getters 正好也引用了这个数据，那么就会立即出发getters 的重新求值


})

new Vue({
	el: '#app',
	render: c => c(app),
	router,
	store // 5. 将vuex 创建的store 挂载到 vm实例上，只要挂在到了vm上，任何组件都能使用store来存取数据

})
